<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/login.css">
</head>

<body>
    <header class="header">
        <img src="img/login/logo.d026f02.png" class="logo" alt="">
        <img src="img/login/slogan.5aedff4.png" class="slogan" alt="">
        <div class="header-1">
            <a href="">
                <p>返回首页</p>
            </a>
            <a href="">
                <p>登录/注册作家账号</p>
            </a>
        </div>
    </header>

    <div class="background">
        <img src="img/login/login-bg.cdce65ac.png" class="login-bg" alt="">
        <img src="img/login/login-logo-image.2e01486e.png" class="login-logo-image" alt="">
        <img src="img/login/login-logo-txt.e83a3e70.png" class="login-logo-txt" alt="">

        <div class="login">
            <h2>用户注册</h2>
            <form id="loginForm" action="/login" method="POST">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" placeholder="请输入用户名">
                    <div id="usernameError" class="error"></div>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" placeholder="请输入密码">
                    <div id="passwordError" class="error"></div>
                </div>
                <button type="submit" class="login-button">登录</button>
            </form>
        </div>
    </div>

    <div class="footer">
        <div class="footer-1">
            <a href="#">七猫中文网</a>|
            <a href="#">奇妙小说网</a>|
            <a href="#">纵横中文网</a>|
            <a href="#">帮助中心</a>|
            <a href="#">问题反馈</a>|
            <a href="#">举报工作室</a>|
        </div>
        <div class="footer-2">
            上海七猫文化传媒有限公司 © 2017 www.gmso.com All rights reserved. 沪ICP备17012025号© IP:公网安备31011620010023号<br>
            出版物经营许可证 浙商证字第77739号 沪深交[2023] 1686-1065 沪ICP证：沪B2-20-108085
        </div>
        <img src="img/login/1.5dc41de8.png" class="footer-img1" alt="">
        <img src="img/login/2.7ac78a2a.png" class="footer-img2" alt="">
        <img src="img/login/3.665a3781.png" class="footer-img3" alt="">
        <img src="img/login/4.136748fb.png" class="footer-img4" alt="">
        <img src="img/login/5.db8ce747.png" class="footer-img5" alt="">
        <img src="img/login/6.a1cc2a3c.png" class="footer-img6" alt="">
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function (e) {
            let isValid = true;
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            document.getElementById('usernameError').textContent = '';
            document.getElementById('passwordError').textContent = '';

            // 用户名验证
            if (username.length < 4) {
                document.getElementById('usernameError').textContent = '用户名至少4个字符';
                isValid = false;
            }

            // 密码验证
            if (password.length < 6) {
                document.getElementById('passwordError').textContent = '密码至少6个字符';
                isValid = false;
            }

            if (!isValid) {
                e.preventDefault();
            }
        });
    </script>
</body>

</html>